import styles from './sale.module.scss';
import {createPayOrder, queryProductList} from '@/api';
import {useEffect, useState} from "react";
import {SaleProduct, SaleResponseCodeEnum} from "@/types/sale_product";
import {useAccessStore} from "@/app/store/access";
import {useNavigate} from "react-router-dom";
import {Button, Image} from "antd";

export function Sale() {

    const [products, setProducts] = useState<SaleProduct[]>([]);
    const [showModal, setShowModal] = useState(false);
    const [payImg, setPayImg] = useState('');

    const access = useAccessStore();

    const navigate = useNavigate();

    const handleOnModal = (flag: boolean) => {
        setShowModal(flag);
    }

    const queryProductListHandle = async () => {
        const res = await queryProductList();
        const {code, data} = await res.json();
        if (SaleResponseCodeEnum.TOKEN_ERR === code) {
            access.getState().goToLogin();
        }
        setProducts(data);
    }

    const createPayOrderHandle = async (productId: number) => {
        const res = await createPayOrder(productId);
        const {code, data} = await res.json();
        if (SaleResponseCodeEnum.TOKEN_ERR === code) {
            access.getState().goToLogin();
        }
        if (SaleResponseCodeEnum.SUCCESS === code) {
            setPayImg(data);
            handleOnModal(true);
        }
    }

    useEffect(() => {
        queryProductListHandle().then(() => {
        });
    }, []);

    return (
        <div className={styles["sale"]}>
            {products?.map((product) => (
                <div key={product.productId} className={styles["product"]}>
                    <div className={styles["product-name"]}>
                        {product.productName}
                    </div>
                    <div className={styles["product-token"]}>
                        {product.quota}<span className={styles["product-token-subscript"]}>(条)</span>
                    </div>
                    <div className={styles["product-price"]}>
                        <span style={{color: '#af0000', fontSize: "20px"}}>¥{product.price.toFixed(2)}</span>
                    </div>
                    <div className={styles["product-buy"]}>
                        <Button type="primary" onClick={() => createPayOrderHandle(product.productId)}>立即购买</Button>
                    </div>
                    <div className={styles["product-desc"]}>
                        <span>{product.productModelTypes}</span>
                    </div>
                </div>
            ))}
            {showModal && (
                <div className={styles["product-pay"]}>
                    <div className={styles["product-pay-weixin"]}>
                        微信扫码支付
                    </div>
                    <div className={styles["product-pay-url"]}>
                        <Image width={160} src={payImg}/>
                    </div>
                    <div className={styles["product-pay-close"]}>
                        <div onClick={() => handleOnModal(false)}>😁 支付完成，点击关闭。去对话</div>
                    </div>
                    <div className={styles["product-pay-prompt"]}>
                        <span>支付成功，自动充值。可直接去
                            <span style={{color: "rgb(0,0,0)", fontWeight: "bold", cursor: "pointer"}}
                                  onClick={() => navigate(`/chat`)}>【对话】
                            </span>使用
                        </span>
                    </div>
                </div>
            )}
        </div>
    )
}
